<template>
	<view class="paymentBox">
		<uv-navbar title="立即支付" @leftClick="goBack" bgColor="#277CC0" :placeholder="true"
			titleStyle="color:#FFFFFF;fontWeight:500" leftIconColor="#FFFFFF"></uv-navbar>
		<view class="orderInfo">
			<text>订单编号：JC20246068</text>
			<text class="t2">已完成</text>
		</view>
		<view class="addressBox">
			<view class="a_Title">
				<text>青岛市</text>
				<image src="../../static/images/i1.png" mode=""></image>
				<text>郑州市</text>
			</view>
			<view class="a_info">
				<view class="item_info">
					<view class="i1">
						发运日期：2024-3-18
					</view>
					<view class="i1">
						提交时间：2024-3-15
					</view>
				</view>
				<view class="item_info">
					<view class="i1">
						委托人姓名：张建涛
					</view>
					<view class="i1">
						委托人手机号：15378708078
					</view>
				</view>
				<view class="item_info">
					<view class="i1">
						收车人姓名：张建涛
					</view>
					<view class="i1">
						收车人手机号：15378708078
					</view>
				</view>
			</view>
			<view class="carInfo">
				<view class="carTitle">
					车辆信息
				</view>
				<view class="carItem" v-for="i in 4" :key="i">
					<text>车辆一：奥迪A7L</text>估值42万元
				</view>
			</view>
		</view>
		<view class="serveBox">
			<view class="serTitle">
				提送服务
			</view>
			<view class="serInfo">
				<text>上门提车：送至网点</text>送车上门：上门送车
			</view>
			<uv-divider></uv-divider>
			<view class="serTitle">
				其他信息
			</view>
			<view class="serInfo">
				<text>业务对接人：张建涛</text>手机号：15378708078
			</view>
			<uv-divider></uv-divider>
			<view class="serTitle">
				是否开票：是
			</view>
		</view>
		<view class="invoiceBox">
			<text>电子合同</text>
			<view class="lookInvoice" @click="contractBtn">
				查看电子合同
				<uv-icon name="arrow-right" color="#222222" size="12"></uv-icon>
			</view>
		</view>
		<view class="checkCarImg">
			<view class="title_car">
				<text>验车照片</text>
				<view class="moreBox" @click="moreImg">
					更多<uv-icon name="arrow-right" color="#222222" size="12"></uv-icon>
				</view>

			</view>
			<view class="imgBox">
				<view class="imgItem">
					<image src="../../static/images/profile.jpg" mode=""></image>
					<text>提米</text>
				</view>
			</view>
			<!--添加照片-->
			<view class="addImgBox">
				<view class="addImg" @click="addImgBtn">
					<uv-icon name="plus" color="#C7C7C7" size="28"></uv-icon>
				</view>
				点击添加验车图片和标题
			</view>
		</view>
		<view class="remarkBox">
			<text>备注</text>无
		</view>
		<!--运费-->
		<view class="moneyText">
			运费：1980元
		</view>
		<!--立即支付-->
		<view class="payMoney">
			<text>运费：1980元</text>
			<view class="payBtn">
				<image src="../../static/images/d4.png" mode=""></image>
				立即支付
			</view>
		</view>
		<!--电子合同弹窗-->
		<uv-modal ref="dzContract" :showConfirmButton="false">
			<view class="slot-content">
				<view class="contractBox">
					<view class="titleBox">
						<text>电子合同</text>
						<uv-icon name="close-circle" size="26" @click="contractClose"></uv-icon>
					</view>
					<view class="infoItem">
						甲方：张建涛
					</view>
					<view class="infoItem">
						乙方：亿城通物流有限公司
					</view>
					<view class="infoItem">
						甲乙双方本着自愿、互利、公平的原则，根据有关法律，一致同
						意达成:由乙方为甲方提供汽车托运服务，具体条款如下:
					</view>
					<view class="infoItem">
						一、托运信息
					</view>
					<view class="infoItem">
						<text>发车地:青岛</text>市目的地:郑州市
					</view>
					<view class="infoItem">
						车辆类型
					</view>
					<view class="infoItem">
						<text> 车辆一：奥迪A7L</text> 估值 42万元
					</view>
					<view class="infoItem">
						<text>上门提车：是 </text>送车上门：是
					</view>
					<view class="infoItem">
						<text>发运日期：2024-3-18 </text>提交时间：2024-3-15
					</view>
					<view class="infoItem">
						二、服务承诺
					</view>
					<view class="infoItem">
						************************************************
					</view>
				</view>
			</view>
		</uv-modal>
		<!--验车照片-->
		<uv-modal ref="checkCar" :showConfirmButton="false">
			<view class="slot-content">
				<view class="contractBox">
					<view class="titleBox">
						<text>验车照片</text>
						<uv-icon name="close-circle" size="26" @click="carImgClose"></uv-icon>
					</view>
					<view class="imgAllBox">
						<view class="imgBox" v-for="i in 5" :key="i">
							<image src="../../static/images/profile.jpg" mode="widthFix"></image>
							<view class="imgInfo">
								<text>
									照片匹配标题文字，字数限制在15
								</text>
								<text>
									上传时间：2024-3-18
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uv-modal>
		<uv-modal ref="addCarImg" :showConfirmButton="false">
			<view class="contractBox">
				<view class="titleBox">
					<text>添加验车照片和标题</text>
					<uv-icon name="close-circle" size="26" @click="coleAddImg"></uv-icon>
				</view>
				<view class="iptBox">
					<uv-input placeholder="请输入验车标题" border="surround" v-model="value" @change="change"></uv-input>
				</view>
				<view class="uploadInfo">
					<view class="">
						<uv-upload :fileList="fileList1" name="1" multiple :maxCount="10" @afterRead="afterRead"
							@delete="deletePic"></uv-upload>
					</view>
					<text>点击添加验车图片</text>
				</view>
				<view class="sureBtn">
					确定
				</view>
			</view>
		</uv-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
			};
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//添加照片
			addImgBtn() {
				this.$refs.addCarImg.open();
			},
			coleAddImg(){
				this.$refs.addCarImg.close();
			},
			//合同按钮
			contractBtn() {
				this.$refs.dzContract.open();
			},
			//合同弹窗关闭
			contractClose() {
				this.$refs.dzContract.close();
			},
			//更多照片
			moreImg() {
				this.$refs.checkCar.open();
			},
			//验证车弹窗关闭
			carImgClose() {
				this.$refs.checkCar.close();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.paymentBox {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 97rpx;
        position: relative;
		.orderInfo {
			font-size: 24rpx;
			color: #000000;
			line-height: 61rpx;
			padding: 0rpx 20rpx;
			display: flex;
			justify-content: space-between;
			font-weight: 600;

			.t2 {
				color: #D72031
			}
		}

		.addressBox {
			width: 750rpx;
			background-color: #FFFFFF;
			padding: 33rpx 20rpx 0rpx;

			.a_Title {
				width: 710rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 99rpx;
				margin-bottom: 26rpx;
				font-weight: 600;

				image {
					width: 166rpx;
					height: 17rpx;
				}
			}

			.a_info {
				width: 710rpx;
				height: 176rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				padding: 16rpx 0rpx 0rpx 25rpx;

				.item_info {
					line-height: 49rpx;
					display: flex;
					font-size: 22rpx;
					color: #222222;

					.i1 {
						flex-basis: 0rpx;
						flex-grow: 1;
					}
				}
			}

			.carInfo {
				.carTitle {
					color: #000000;
					line-height: 49rpx;
					font-size: 24rpx;
					font-weight: 600;
				}

				.carItem {
					font-size: 22rpx;
					color: #222222;
					line-height: 50rpx;

					text {
						padding-right: 40rpx;
					}

				}
			}
		}

		.serveBox {
			margin-top: 15rpx;
			background-color: #FFFFFF;
			width: 750rpx;

			padding-bottom: 16rpx;

			.serTitle {
				font-size: 24rpx;
				color: #000000;
				line-height: 49rpx;
				padding-left: 22rpx;
				font-weight: 600;
			}

			.serInfo {
				padding-left: 22rpx;
				color: #222222;
				font-size: 22rpx;
				line-height: 50rpx;

				text {
					padding-right: 60rpx;
				}
			}
		}

		.invoiceBox {
			margin-top: 18rpx;
			width: 750rpx;
			height: 71rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 22rpx;
			color: #222222;
			padding: 0rpx 25rpx;

			text {
				font-weight: 600;
				font-size: 24rpx;
				color: #000000;
			}

			.lookInvoice {
				display: flex;
				align-items: center;
			}
		}

		.checkCarImg {
			margin-top: 16rpx;
			background-color: #FFFFFF;
			width: 750rpx;
			// height: 306rpx;
			padding: 25rpx;

			.title_car {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #000000;
					font-weight: 600;
				}

				.moreBox {
					display: flex;
					color: #555555;
					font-size: 20rpx;
				}
			}

			.imgBox {
				display: flex;
				margin-top: 30rpx;

				.imgItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 17rpx;
					font-size: 20rpx;
					color: #666666;

					image {
						height: 162rpx;
						width: 163rpx;
						margin-bottom: 16rpx;
					}
				}
			}

			.addImgBox {
				height: 108rpx;
				display: flex;
				align-items: center;
				color: #555555;
				font-size: 20rpx;
				margin-top: 27rpx;
			}

			.addImg {
				width: 109rpx;
				height: 108rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 11rpx;
			}
		}

		.remarkBox {
			width: 750rpx;
			height: 71rpx;
			background-color: #FFFFFF;
			margin-top: 22rpx;
			display: flex;
			align-items: center;
			font-size: 22rpx;
			color: #555555;
			padding-left: 23rpx;

			text {
				color: #000000;
				font-size: 24rpx;
				padding-right: 13rpx;
			}

		}
        .moneyText{
			margin-top: 20rpx;
			line-height: 50rpx;
			font-size: 30rpx;
			color: #D72031;
			font-weight: 600;
			padding-left: 21rpx;
		}
		.payMoney{
			position: fixed;
			bottom: 0rpx;
			width: 750rpx;
			height: 87rpx;
			display: flex;
			justify-content:space-between;
			background-color: #FFFFFF;
			align-items: center;
			padding: 0rpx 21rpx;
			text{
				font-size: 30rpx;
				color: #D72031;
				font-weight: 600;
			}
			.payBtn {
				width: 208rpx;
				height: 54rpx;
				background: rgba(39, 124, 192, 1);
				border-radius: 6rpx;
				color: #ffffff;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			
				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 11rpx;
				}
			}
		}
		.contractBox {
			width: 699rpx;
			// height: 853rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0rpx 38rpx;

			.titleBox {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					font-weight: 600;
				}
			}

			.iptBox {
				margin-top: 33rpx;
			}

			.uploadInfo {
				margin-top: 14rpx;
				display: flex;
				align-items: center;
			}
			.sureBtn{
				width: 597rpx;
				height: 59rpx;
				background: #277CC0;
				border-radius: 12rpx;
				cursor: pointer;
				line-height: 59rpx;
				margin: 0 auto;
				color:#FFFFFF;
				font-size: 26rpx;
				text-align: center;
				margin-top: 30rpx;
			}

			.infoItem {
				font-size: 22rpx;
				color: #222222;
				line-height: 49rpx;

				text {
					display: inline-block;
					width: 260rpx;
				}
			}

			.addressInfo {
				width: 603rpx;
				margin: 0 auto;
				margin-top: 41rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 36rpx;
					color: #2E2E2E;
					font-weight: 600;
				}

				image {
					width: 166rpx;
					height: 17rpx;
					margin: 0rpx 60rpx;
				}
			}

			.timeInfo {
				width: 600rpx;
				height: 117rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				padding-left: 22rpx;
				padding-top: 10rpx;

				.tiem_info {
					display: flex;
					align-items: center;
					color: #222222;
					font-size: 22rpx;
					line-height: 49rpx;

					.i1 {
						flex-basis: 0rpx;
						flex-grow: 1;
					}
				}
			}

			.carInfoBox {
				margin-left: 23rpx;
				font-size: 22rpx;
				color: #222222;
				line-height: 49rpx;

				text {
					padding-right: 20rpx;
				}
			}

			.imgAllBox {
				height: 800rpx;
				// width: 640rpx;
				// overflow-x: hidden;
				overflow: auto;
			}

			.imgBox {
				image {
					margin-bottom: 26rpx;
				}

				.imgInfo {
					font-size: 22rpx;
					color: #222222;
					justify-content: space-between;
				}
			}
		}
	}
</style>